<template>
	<view class="order-detail">
	  <!-- 内容 -->
	  <scroll-view class="viewport" scroll-y>
		<!-- 顶部导航栏 -->
		<view class="navbar" :style="{ paddingTop: paddingTop + 'px' }">
		  <view class="wrap">
			<navigator
			  open-type="navigateBack"
			  class="back icon-left"
			></navigator>
			<view :class="['title', platform]">订单详情</view>
		  </view>
		</view>
		<!-- 订单状态 -->
		<view class="overview" :style="{ paddingTop: paddingTop + 40 + 'px' }">
		  <template v-if="detail.orderState === OrderState.DaiFuKuan">
			<view class="status icon-clock">等待付款</view>
			<view class="tips">
			  <text>应付金额: ¥{{ 0.01 }}</text>
			  <text class="countdown"> 支付剩余  </text>
			   <uni-countdown
			    @timeup="onTimeUp"
				:minute="countDown[0]"
				:second="countDown[1]"
				:showDay="false"
				start
				color="#fff"
			  />
			</view>
			<view class="button">去支付</view>
		  </template>
		  <template v-else>
			<view class="status icon-clock">
			  {{ OrderStateOptions[detail.orderState] }}
			</view>
		  </template>
		</view>
		<!-- 商品信息 -->
		<view class="goods">
		  <view class="item">
			<navigator
			  v-for="item in detail.skus"
			  :key="item.id"
			  :url="`/pages/goods/index?id=${item.spuId}`"
			  hover-class="none"
			>
			  <image class="cover" :src="item.image"></image>
			  <view class="meta">
				<view class="name ellipsis">{{ item.name }}</view>
				<view class="type">{{ item.attrsText }}</view>
				<view class="price">
				  <view class="original">
					<text class="symbol">¥</text>
					<text>{{ item.curPrice }}</text>
				  </view>
				  <view class="actual">
					<text class="text">实付: </text>
					<text class="symbol">¥</text>
					<text>{{ item.realPay }}</text>
				  </view>
				</view>
				<view class="quantity">x{{ item.quantity }}</view>
			  </view>
			</navigator>
			<view
			  class="action"
			  v-if="detail.orderState === OrderState.YiWanCheng"
			>
			  <view class="button primary">申请售后</view>
			  <navigator url="/pages/comments/publish/index" class="button">
				去评价
			  </navigator>
			</view>
		  </view>
		  <!-- 合计 -->
		  <view class="total">
			<view class="row">
			  <view class="text">商品总价: </view>
			  <view class="symbol">{{ detail.totalMoney }}</view>
			</view>
			<view class="row">
			  <view class="text">运费: </view>
			  <view class="symbol">{{ detail.postFee }}</view>
			</view>
			<view class="row paid">
			  <view class="text">实付: </view>
			  <view class="symbol primary">{{ detail.payMoney }}</view>
			</view>
		  </view>
		</view>
		<!-- 订单信息 -->
		<view class="detail">
		  <view class="title">订单信息</view>
		  <view class="row">
			<view>订单编号: {{ detail.id }}</view>
			<view>下单时间: {{ detail.createTime }}</view>
			<view >
			  支付方式: 在线支付
			</view>
			<view >
			  支付渠道: 微信支付
			</view>
		  </view>
		</view>
	  </scroll-view>
  
	  <!-- 底部工具 -->
	  <view class="toobar" v-if="detail.orderState === OrderState.DaiFuKuan">
		<view @tap="orderPay" class="primary">去支付</view>
		<view class="default">取消订单</view>
	  </view>
	</view>
  </template>
  <script setup>
  import { geOrderDetailAPI,getPayWxPayMiniPay } from '@/api/cart'
  import { OrderState,OrderStateOptions } from './OrderConstance'
  import { onLoad } from '@dcloudio/uni-app';
  import { ref, computed } from 'vue'
  import dayjs from "dayjs";

	//   顶部安全区域
	const paddingTop = uni.getWindowInfo().safeArea.top
    const detail = ref({})

 //   获取订单id
  onLoad((e) => {
	const id = e.id
  onLoadId(id)
  })

 //   渲染页面
  const onLoadId = async (id) => {
  const { result } = await geOrderDetailAPI(id)
 
  detail.value = result
  
  }

  //   倒计时
  const countDown = computed(() => {
	return dayjs.unix(detail.value.countdown).format('mm ss').split(' ').map(v => +v)
    })
  //   时间倒计时结束
  const onTimeUp = () => {
	detail.value.orderState = OrderState.YiQuXiao
  }

//   订单支付
  const orderPay = async() => {
  	  const { result } = await getPayWxPayMiniPay(detail.value.id)
		// 调用微信支付
		const payRes = await uni.requestPayment(result)
  	  console.log(payRes, 111111111111);
 }

  </script>
  <style lang="scss">
  .order-detail {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
  }
  .navbar {
	width: 750rpx;
	color: #fff;
	background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	.title {
	  height: 40px;
	  line-height: 30px;
	  text-align: center;
	  font-size: 17px;
	  font-weight: 500;
	}
	.android {
	  text-align: left;
	  padding-left: 42px;
	}
	.wrap {
	  position: relative;
	}
	.back {
	  position: absolute;
	  left: 10px;
	  top: 4px;
	  line-height: 1;
	  font-size: 23px;
	  z-index: 9;
	}
  }
  .viewport {
	background-color: #f7f7f8;
  }
  .overview {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	padding-bottom: 30rpx;
	color: #fff;
	background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
	background-size: cover;
	.status {
	  font-size: 36rpx;
	  &::before {
		margin-right: 6rpx;
		font-weight: 500;
	  }
	}
	.tips {
	  margin-top: 30rpx;
	  font-size: 24rpx;
	  width: 100%;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  .countdown {
		margin-left: 10rpx;
	  }
	}
	.button {
	  width: 260rpx;
	  height: 64rpx;
	  text-align: center;
	  line-height: 64rpx;
	  margin-top: 30rpx;
	  font-size: 28rpx;
	  color: #27ba9b;
	  border-radius: 68rpx;
	  background-color: #fff;
	}
  }
  .shipment {
	line-height: 1.4;
	padding: 0 20rpx;
	margin: 20rpx 20rpx 0;
	border-radius: 10rpx;
	background-color: #fff;
	.locate {
	  background-image: url(https://static.botue.com/erabbit/static/images/locate.png);
	  .user {
		font-size: 26rpx;
		color: #444;
	  }
	  .address {
		font-size: 24rpx;
		color: #666;
	  }
	}
	.logistics {
	  background-image: url(https://static.botue.com/erabbit/static/images/car.png);
	  border-bottom: 1rpx solid #eee;
	  position: relative;
	  &::after {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		content: "\e6c2";
		font-family: "erabbit" !important;
		font-size: 32rpx;
		color: #666;
	  }
	  .message {
		font-size: 26rpx;
		color: #444;
	  }
	  .date {
		font-size: 24rpx;
		color: #666;
	  }
	}
  }
  .shipment .locate,
  .shipment .logistics {
	min-height: 120rpx;
	padding: 30rpx 30rpx 25rpx 75rpx;
	background-size: 50rpx;
	background-repeat: no-repeat;
	background-position: 6rpx center;
  }
  .goods {
	margin: 20rpx 20rpx 0;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
	.item {
	  padding: 30rpx 0;
	  border-bottom: 1rpx solid #eee;
	  navigator {
		display: flex;
	  }
	  .cover {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	  }
	  .meta {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	  }
	  .name {
		height: 80rpx;
		font-size: 26rpx;
		color: #444;
	  }
	  .type {
		line-height: 1.8;
		padding: 0 15rpx;
		margin-top: 6rpx;
		font-size: 24rpx;
		align-self: flex-start;
		border-radius: 4rpx;
		color: #888;
		background-color: #f7f7f8;
	  }
	  .price {
		display: flex;
		margin-top: 6rpx;
		font-size: 24rpx;
	  }
	  .symbol {
		font-size: 20rpx;
	  }
	  .original {
		color: #999;
		text-decoration: line-through;
	  }
	  .actual {
		margin-left: 10rpx;
		color: #444;
	  }
	  .text {
		font-size: 22rpx;
	  }
	  .quantity {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 24rpx;
		color: #444;
	  }
	  .action {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		padding: 30rpx 0 0;
	  }
	}
	.action {
	  .button {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		justify-content: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 60rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		color: #444;
	  }
	  .primary {
		color: #27ba9b;
		border-color: #27ba9b;
	  }
	}
	.total {
	  line-height: 1;
	  font-size: 26rpx;
	  padding: 20rpx 0;
	  color: #666;
	  .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	  }
	  .symbol {
		&::before {
		  content: "¥";
		  font-size: 20rpx;
		}
	  }
	  .paid {
		font-size: 30rpx;
		color: #444;
	  }
	  .primary {
		color: #cf4444;
	  }
	}
  }
  .detail {
	line-height: 1;
	padding: 30rpx 20rpx 0;
	margin: 20rpx 20rpx 0;
	font-size: 26rpx;
	color: #666;
	border-radius: 10rpx;
	background-color: #fff;
	.title {
	  font-size: 30rpx;
	  color: #444;
	}
	.row {
	  padding: 20rpx 0;
	  & > view {
		display: block;
		padding: 10rpx 0;
	  }
	}
  }
  .toobar {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	padding: 30rpx 20rpx;
	background-color: #fff;
	box-shadow: 0 -4rpx 6rpx rgba(240, 240, 240, 0.6);
	position: relative;
	z-index: 9;
	& > view {
	  width: 200rpx;
	  height: 72rpx;
	  text-align: center;
	  line-height: 72rpx;
	  margin-left: 15rpx;
	  font-size: 26rpx;
	  border-radius: 72rpx;
	}
	.default {
	  color: #444;
	  border: 1rpx solid #ccc;
	}
	.primary {
	  color: #fff;
	  background-color: #27ba9b;
	}
  }
  .popup-root {
	padding: 30rpx 30rpx 0;
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
	.title {
	  font-size: 30rpx;
	  text-align: center;
	  margin-bottom: 30rpx;
	}
	.description {
	  font-size: 28rpx;
	  padding: 0 20rpx;
	  .tips {
		color: #444;
		margin-bottom: 12rpx;
	  }
	  .cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		padding: 15rpx 0;
		margin-bottom: 4rpx;
		color: #666;
	  }
	  .icon-ring {
		font-size: 38rpx;
		color: #999;
	  }
	  .icon-checked {
		font-size: 38rpx;
		color: #27ba9b;
	  }
	}
	.footer {
	  display: flex;
	  justify-content: space-between;
	  padding: 30rpx 0 40rpx;
	  font-size: 28rpx;
	  color: #444;
	  .button {
		flex: 1;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		margin: 0 20rpx;
		color: #444;
		border-radius: 72rpx;
		border: 1rpx solid #ccc;
	  }
	  .primary {
		color: #fff;
		background-color: #27ba9b;
		border: none;
	  }
	}
  }
  </style>